<template>
  <div class="search-common" v-if="isShowKey === 'practicalTraining-default'">
    <el-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="请输入想要搜索的内容"
      class="input-with-select"
      clearable
    >
      <template #prepend>
        <el-select
          v-model="inputSearchInfo"
          placeholder="Select"
          style="width: 115px"
        >
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
          <!-- 改成for循环 -->
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #append>
        <el-button round :icon="Search" @click="search" />
      </template>
    </el-input>
  </div>
  <!-- 不帶下拉框 -->
  <div class="search-common" v-if="isShowKey === 'productManagement_noSelect'">
    <el-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="请输入想要搜索的内容"
      class="input-with-noSelect"
      clearable>
      <template #append>
        <el-button round :icon="Search" @click="search" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import { Search } from "@element-plus/icons-vue";

//接受父组件传来的值
const props = defineProps({
  isShowKey: {
    type: String,
    default: "",
  },
});

//将值进行转换
const { isShowKey } = toRefs(props);

//搜索框内容
const inputSearchInfo = ref("");
const searchList = ref([
  { label: "活动名称", value: "activeName" },
  { label: "活动时间", value: "activeTime" },
  { label: "活动地点", value: "activePlace" },
]);
const search = () => {
  ElMessage({
    message: "搜索成功",
    type: "success",
    plain: true,
  });
};
</script>
<style lang="scss" scoped>
// 独立样式
.input-with-select:deep(.el-input-group) {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
}
.input-with-select:deep(.el-input-group__prepend) {
  border-radius: 18px 0 0 18px;
}
.input-with-select:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
.input-with-select:deep(.el-select__wrapper) {
  border-radius: 18px 0 0 18px;
}
.input-with-noSelect:deep(.el-input__wrapper) {
  border-radius: 18px 0px 0px 18px;
}
.input-with-noSelect:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
</style>
